<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多种样式的社交网站顶部导航</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 通用样式 */
        .header-demo {
            margin-bottom: 3rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .header-demo h3 {
            padding: 1rem;
            background-color: #f8f9fa;
            margin: 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .nav-container {
            transition: all 0.3s ease;
        }
        
        .nav-link {
            position: relative;
            transition: all 0.2s ease;
        }
        
        /* 样式1：简约现代风 */
        .style-1 .top-bar {
            background-color: #f8f9fa;
            padding: 0.5rem 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .style-1 .main-nav {
            background-color: white;
            padding: 0.75rem 0;
        }
        
        .style-1 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2563eb;
        }
        
        .style-1 .nav-link:hover {
            color: #2563eb !important;
        }
        
        .style-1 .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #2563eb;
            transition: width 0.3s ease;
        }
        
        .style-1 .nav-link:hover::after {
            width: 100%;
        }
        
        /* 样式2：深色专业风 */
        .style-2 .top-bar {
            background-color: #1e293b;
            padding: 0.5rem 0;
            color: white;
        }
        
        .style-2 .main-nav {
            background-color: #0f172a;
            padding: 0.75rem 0;
        }
        
        .style-2 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #3b82f6;
        }
        
        .style-2 .nav-link {
            color: #e2e8f0 !important;
        }
        
        .style-2 .nav-link:hover {
            color: #3b82f6 !important;
        }
        
        .style-2 .search-input {
            background-color: #1e293b;
            border-color: #334155;
            color: white;
        }
        
        .style-2 .search-input:focus {
            background-color: #1e293b;
            border-color: #3b82f6;
            color: white;
        }
        
        /* 样式3：活力社交风 */
        .style-3 .top-bar {
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            padding: 0.5rem 0;
            color: white;
        }
        
        .style-3 .main-nav {
            background-color: white;
            padding: 0.75rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .style-3 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .style-3 .nav-link {
            color: #475569 !important;
            font-weight: 500;
        }
        
        .style-3 .nav-link:hover {
            color: #8b5cf6 !important;
        }
        
        .style-3 .btn-primary {
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            border: none;
        }
        
        .style-3 .btn-primary:hover {
            opacity: 0.9;
        }
        
        /* 样式4：极简商务风 */
        .style-4 .top-bar {
            background-color: white;
            padding: 0.5rem 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .style-4 .main-nav {
            background-color: white;
            padding: 1rem 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .style-4 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e293b;
        }
        
        .style-4 .nav-link {
            color: #1e293b !important;
            font-weight: 500;
            margin: 0 0.75rem;
        }
        
        .style-4 .nav-link:hover {
            color: #64748b !important;
        }
        
        .style-4 .btn-primary {
            background-color: #1e293b;
            border-color: #1e293b;
        }
        
        .style-4 .btn-primary:hover {
            background-color: #334155;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .nav-items {
                margin-top: 1rem;
            }
            
            .search-container {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
        }
    </style>
</head>
<body class="p-4">
    <div class="container">
        <h2 class="text-center mb-5">社交网站顶部导航样式集合</h2>
        
        <!-- 样式1：简约现代风 -->
        <div class="header-demo style-1">
            <h3>样式1：简约现代风</h3>
            <div class="nav-container">
                <!-- 顶部信息栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <span><i class="fas fa-bell"></i> 今日有 5 条新消息</span>
                            <span class="d-none d-md-inline-block"><i class="fas fa-circle text-success"></i> 系统正常运行中</span>
                        </div>
                        <div class="d-flex gap-3">
                            <a href="#" class="text-dark hover:text-primary"><i class="fas fa-question-circle"></i> 帮助</a>
                            <a href="#" class="text-dark hover:text-primary"><i class="fas fa-cog"></i> 设置</a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-connectdevelop me-2"></i>SocialHub
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle1">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle1">
                                <!-- 导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-users me-1"></i> 好友</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-comment-dots me-1"></i> 消息</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-th-large me-1"></i> 更多
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-bookmark me-2"></i> 收藏</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-history me-2"></i> 历史</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-chart-line me-2"></i> 数据分析</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 用户区域 -->
                                <div class="d-flex align-items-center gap-3">
                                    <button class="btn btn-primary rounded-pill">
                                        <i class="fas fa-plus me-1"></i> 发布
                                    </button>
                                    <div class="dropdown">
                                        <button class="btn btn-circle bg-primary text-white" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-user"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人主页</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 账户设置</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：深色专业风 -->
        <div class="header-demo style-2">
            <h3>样式2：深色专业风</h3>
            <div class="nav-container">
                <!-- 顶部信息栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-4">
                            <span><i class="fas fa-calendar-alt me-1"></i> 2023年10月15日</span>
                            <span><i class="fas fa-user-check me-1"></i> 专业版会员</span>
                        </div>
                        <div class="d-flex gap-4">
                            <a href="#" class="text-white hover:text-primary"><i class="fas fa-bell"></i> <span class="badge bg-danger">3</span></a>
                            <a href="#" class="text-white hover:text-primary"><i class="fas fa-envelope"></i> <span class="badge bg-primary">7</span></a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-network-wired me-2"></i>ProConnect
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle2">
                                <i class="fas fa-bars text-white"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle2">
                                <!-- 导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-briefcase me-1"></i> 职业机会</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-newspaper me-1"></i> 行业资讯</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-handshake me-1"></i> 商务合作</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-graduation-cap me-1"></i> 专业课程</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control search-input rounded-pill border-right-0" placeholder="搜索人脉、公司、职位...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0 text-white" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 用户区域 -->
                                <div class="d-flex align-items-center gap-3">
                                    <button class="btn btn-outline-primary rounded-pill text-white border-primary">
                                        <i class="fas fa-user-plus me-1"></i> 拓展人脉
                                    </button>
                                    <div class="dropdown">
                                        <button class="btn btn-circle bg-primary text-white" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-user-tie"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-dark border-secondary">
                                            <li><a class="dropdown-item text-white" href="#"><i class="fas fa-user me-2"></i> 个人档案</a></li>
                                            <li><a class="dropdown-item text-white" href="#"><i class="fas fa-chart-bar me-2"></i> 数据中心</a></li>
                                            <li><a class="dropdown-item text-white" href="#"><i class="fas fa-cog me-2"></i> 偏好设置</a></li>
                                            <li><hr class="dropdown-divider bg-secondary"></li>
                                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：活力社交风 -->
        <div class="header-demo style-3">
            <h3>样式3：活力社交风</h3>
            <div class="nav-container">
                <!-- 顶部信息栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-2">
                            <span class="px-3 py-1 rounded-full bg-white/20"><i class="fas fa-star me-1"></i> 热门活动</span>
                            <span>正在进行：年度社交达人评选</span>
                        </div>
                        <div class="d-flex gap-4">
                            <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-heart-pulse me-2"></i>VibeSocial
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle3">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle3">
                                <!-- 导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 探索</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-video me-1"></i> 短视频</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-gamepad me-1"></i> 游戏</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-trophy me-1"></i> 活动</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索朋友、话题、内容...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 用户区域 -->
                                <div class="d-flex align-items-center gap-3">
                                    <button class="btn btn-primary rounded-pill">
                                        <i class="fas fa-plus me-1"></i> 发布
                                    </button>
                                    <div class="dropdown">
                                        <button class="btn rounded-circle bg-gradient-to-r from-purple-500 to-pink-500 text-white" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-user"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 我的主页</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-bookmark me-2"></i> 收藏</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="fas fa-crown me-2"></i> 会员中心</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：极简商务风 -->
        <div class="header-demo style-4">
            <h3>样式4：极简商务风</h3>
            <div class="nav-container">
                <!-- 顶部信息栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-end align-items-center gap-4">
                        <a href="#" class="text-dark hover:text-gray-600"><i class="fas fa-question-circle me-1"></i> 帮助中心</a>
                        <a href="#" class="text-dark hover:text-gray-600"><i class="fas fa-headphones me-1"></i> 联系我们</a>
                        <a href="#" class="text-dark hover:text-gray-600"><i class="fas fa-language me-1"></i> 语言</a>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-briefcase me-2"></i>Nexus
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle4">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle4">
                                <!-- 导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#">首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">动态</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">人脉</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">资源</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">知识库</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 用户区域 -->
                                <div class="d-flex align-items-center gap-3">
                                    <button class="btn btn-primary rounded-pill">
                                        发布
                                    </button>
                                    <div class="dropdown">
                                        <button class="btn rounded-circle bg-gray-200 text-gray-800" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-user"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><a class="dropdown-item" href="#">个人资料</a></li>
                                            <li><a class="dropdown-item" href="#">设置</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#">退出登录</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化所有下拉菜单和折叠组件
        document.addEventListener('DOMContentLoaded', function() {
            // 为每个激活的导航链接添加特殊样式
            document.querySelectorAll('.nav-link.active').forEach(link => {
                if (link.closest('.style-1')) {
                    link.classList.add('text-primary');
                } else if (link.closest('.style-2')) {
                    link.classList.add('text-primary');
                } else if (link.closest('.style-3')) {
                    link.classList.add('text-purple-600');
                } else if (link.closest('.style-4')) {
                    link.classList.add('text-gray-800', 'border-bottom', 'border-gray-800');
                }
            });
        });
    </script>
</body>
</html>
    